<template>
  <container>
    <div class="filter-container">
      <el-form ref="form" :inline="true" :model="searchForm" class="form-inline">
        <el-row>
          <el-col :span="6">
            <el-form-item label="部门名称" prop="name">
              <el-input v-model="searchForm.name" prefix-icon="el-icon-search" placeholder="请输入部门名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="所属公司" prop="companyid">
              <select-tree class="tree" v-model="searchForm.companyid" :data="companydata" placeholder="请选择所属公司"></select-tree>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="btn-container">
            <el-button icon="el-icon-search" type="primary"  @click="search">查询</el-button>
            <el-button icon="el-icon-refresh"  @click="search('reset')">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="btn-container">
      <el-button type="primary" icon="el-icon-plus" @click="openDialog('add')">新增</el-button>
    </div>
    <el-table
      :data="dataTable"
      row-key="id"
      stripe
      style="width: 100%"
    >
      <el-table-column type="index" label="序号" width="100"></el-table-column>
      <el-table-column prop="id" label="部门编号" ></el-table-column>
      <el-table-column prop="name" label="部门名称"></el-table-column>
      <el-table-column prop="parentid" label="所属上级" v-if="false"></el-table-column>
      <el-table-column prop="managername" label="部门负责人"></el-table-column>
      <el-table-column prop="parentid" label="所属上级" v-if="false"></el-table-column>
      <el-table-column prop="manager" label="部门负责人编号" v-if="false"></el-table-column>
      <el-table-column prop="leader" label="分管领导编号"></el-table-column>
      <el-table-column prop="companyid" label="所属公司编号" v-if="false"></el-table-column>
      <el-table-column prop="companyname" label="所属公司"></el-table-column>
      <el-table-column label="操作"  align="center">
        <template slot-scope="scope">
          <div class="operation-btn">
            <el-button icon="el-icon-edit" @click="edit(scope.row)" type="text"
            >编辑</el-button>
            <el-popconfirm title="您确定要删除吗？"
                           @confirm="deleteById(scope.row.id,scope.row.name,scope.row.parentid)">
              <el-button icon="el-icon-delete" slot="reference" type="text" class="btn-danger">删除</el-button>
            </el-popconfirm>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="searchForm.page"
      :limit.sync="searchForm.pagesize"
      @pagination="loadData"
    />

    <el-drawer
      :title="title"
      v-if="dialogNewSortVisible==true"
      :visible.sync="dialogNewSortVisible"
      @close="cloaseSortDialog"
      :close-on-press-escape="false"
      :wrapperClosable="false"
      destroy-on-close
      size="50%"
    >
      <div class="drawer-content">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-suffix="："
          label-width="100px"
        >
          <el-form-item label="部门名称" prop="name">
            <el-input v-model="ruleForm.name" ></el-input>
          </el-form-item>
          <el-form-item label="所属上级" class="w-full px-1" prop="parentId">
            <select-tree class="tree" v-model="ruleForm.parentid" :data="treedata" placeholder="请选择所属上级"></select-tree>
          </el-form-item>
          <el-form-item label="部门负责人" class="w-full px-1" prop="manager">
            <el-select v-model="ruleForm.manager" placeholder="请选择" class="w-full">
              <el-option
                v-for="item in managerdata"
                :key="item.username"
                :value="item.username"
                :label="item.name"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="分管领导" class="w-full px-1" prop="leader">
            <el-select v-model="ruleForm.leader" placeholder="请选择" class="w-full">
              <el-option
                v-for="item in leaderdata"
                :key="item.username"
                :value="item.username"
                :label="item.name"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="所属公司" class="w-full px-1" prop="companyid">
            <select-tree class="tree" v-model="ruleForm.companyid" :data="companydata" placeholder="请选择所属公司"></select-tree>
          </el-form-item>

          <el-form-item style="margin-right:100px">
            <el-button v-if="isAdd==true" type="primary" @click="add">确认</el-button>
            <el-button v-if="isAdd==false" type="primary" @click="saveEdit">保存</el-button>
            <el-button @click="cloaseSortDialog">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
  </container>
</template>

<script>
import SelectTree from '@/components/selectTree/index.vue';
import Pagination from '@/components/Pagination';
import { getDepartmentlist, getOrgData, addDepartment, updateDepartment, delDepartment } from '@/api/orgm/orgm'

export default {
  name: "departments",
  data() {
    return {
      formInline: {
        name: ''
      },
      total:0,
      title:'',
      isAdd:true,
      treedata:[],
      dataTable:[],
      companydata:[],
      managerdata:[],
      leaderdata:[],
      dialogNewSortVisible: false,
      searchForm: {
        page: 1,
        pagesize: 10,
        name: '',
        companyid: ''
      },
      ruleForm: {
        id:'',
        name: '',
        parentid: null,
        manager:null,
        leader:null,
        companyid:null
      },
      rules: {
        name: [
          { required: true, message: '请输入部门名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  components: {
    SelectTree,
    Pagination
  },//页面加载后渲染
  mounted(){
    //this.departTree();
    this.loadData();
  },
  methods:{
    //dialog关闭事件
    cloaseSortDialog(){
      this.dialogNewSortVisible = false;
      this.loadData();
    },//初始化表格数据
    loadData(){
      getDepartmentlist(this.searchForm).then(res=>{
        if(res.error=="200"){
          this.total=res.result.total;
          this.dataTable = res.result.list;
        }
        else{
          this.$message.error("获取失败");
        }
      });
      getOrgData().then(res => {
        if(res.error=="200"){
          this.treedata = res.result.departList;
          this.companydata=res.result.companyList;
          this.managerdata=res.result.userList;
          this.leaderdata=res.result.userList;
        }

      })
    },
    reload(){
      this.loadData();
    },//新建
    openDialog(){
      this.title="新建";
      this.isAdd=true;
      this.ruleForm.name='';
      this.ruleForm.parentid=null;
      this.ruleForm.companyid=null;
      this.ruleForm.manager=null;
      this.ruleForm.leader=null;
      this.dialogNewSortVisible = true;
    },//编辑
    edit(row){
      this.isAdd=false;
      this.title="修改";
      this.ruleForm.name=row.name;
      this.ruleForm.id=row.id;
      this.ruleForm.companyid=row.companyid;
      this.ruleForm.manager=row.manager;
      this.ruleForm.leader=row.leader;
      if(row.parentid==0){
        this.ruleForm.parentid=null;
      }else
      {
        this.ruleForm.parentid=row.parentid;
      }
      this.dialogNewSortVisible = true;
    },
    //新增
    add(){
      if(this.ruleForm.parentid==null)
      {
        this.ruleForm.parentid=0;
      }
      addDepartment(this.ruleForm).then(res => {
        if(res.error=="200"){
          this.$message.success("添加成功");
          this.dialogNewSortVisible = false;
          setTimeout(()=>{this.reload();},1000);
        }
        else{
          this.$message.error("增加失败");
        }
      })
    },//保存
    saveEdit(){
      updateDepartment(this.ruleForm).then(res => {
        if(res.error=="200"){
          this.$message.success("修改成功");
          this.dialogNewSortVisible = false;
          setTimeout(()=>{this.reload();},1000);
        }
        else{
          this.$message.error("增加失败");
        }
      })
    },//删除分类
    async deleteById(id){
      const res = await delDepartment({id:id});
      if(res.error=="200"){
        this.$message.success("删除成功");
        this.search('reset');
      }
      else{
        this.$message.error("删除失败");
      }
    },
    search(type) {
      if (type === 'reset') {
        this.$refs.form.resetFields();
      }
      this.reload();
    }
  }

}

</script>

<style scoped>
.option {
  height: auto;
  line-height: 1;
  padding: 0;
  background-color: #fff;
}
.tree {
  font-weight: 400;
}
</style>
